<template>
    <div id="app">
      <h1>图片列表</h1>
      <div>
        <el-button type="text" @click="dialogVisible = true">上传图片</el-button>

        <el-dialog
          title="上传图片"
          :visible.sync="dialogVisible"
          width="40%"
          :before-close="handleClose">
          <div id="upload">
        <el-upload
          :headers="token"
          class="upload-demo"
          ref="upload"
          action="http://localhost:3000/uploadimg"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :auto-upload="false">
          <el-button slot="trigger" style="margin-top:200px" size="small" type="primary">选择图片</el-button>
          <el-button style="margin-left: 10px;margin-top: 200px;" size="small" type="primary" @click="submitUpload">提交</el-button>
          <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>
      </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <div>
        <el-table :data="tableData" style="width: 850">
          <el-table-column prop="imgName" label="图片名称" width="210">
          </el-table-column>
          <el-table-column prop="imgSize" label="大小" width="210">
          </el-table-column>
          <el-table-column prop="imgType" label="类型" width="210">
          </el-table-column>
          <el-table-column prop="imgPath" label="缩略图" width="360">
            <template slot-scope="scope">
              <img :src="scope.row.imgPath" style="width:100px;height:100px"/>
            </template>
          </el-table-column >
          <el-table-column prop="imgId" label="操作" width="130">
            <template slot-scope="scope">
              <el-button type="info"  @click="deleteItem(scope.row.imgId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table> 
      </div>
      <div>
        <el-pagination
          small
          layout="prev, pager, next"
          :current-page.sync="page"
          @current-change="changePage"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios'
    export default {
      data() {
        return {
          fileList: [],
          token:{
            Authorization:window.localStorage.getItem('token')
          },
          dialogVisible: false,
          total:20,
          page:1,
          tableData: [],
          ruleForm: {
            getImg: '',
            changePage:'',
            deleteItem:'' ,
            getCount:''           
          },
          rules: {
          }
        };
      },
      methods: {
        submitUpload() {
        this.$refs.upload.submit();
        this.getCount();
        this.getImg();
        // console.log(this.fileList)
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
       async getImg(){
        await this.$axios.post('http://localhost:3000/getimg',{page:this.page})
        .then(res=>{
            // console.log(res);
            this.tableData=res;
          })
       },
       async getCount(){
        await this.$axios.get('http://localhost:3000/getcount')
        .then(res=>{
            this.total=res;
          })
       },
      changePage(pag){
        this.page = pag;
        console.log(this.page);
        this.getImg();
       },
       async deleteItem(id){
        console.log(id);
        await this.$axios.post('http://localhost:3000/deleteimg',{id:id})
        .then(res=>{
            console.log(res);
            this.getCount()
            this.getImg();
        
          })
       }
      },
      mounted(){
        this.getImg();
        this.getCount()
      }
    }
  </script>
  
  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
  }
  #upload{
    width:350px;
    height:400px;
    border:2px dotted gray;
  }
  .forms{
    text-align: center;
  }
  
  </style>
  